<template>
	<view class="content">
		<view class="navbar">
			<view 
				v-for="(item, index) in setlist" :key="index" 
				class="nav-item" 
				:class="{current: tabCurrentIndex === index}"
				@click="tabClick(index)"
			>
				{{item.text}}
			</view>
		</view>
		  <swiper :current="tabCurrentIndex" class="swiper-box" duration="300" @change="changeTab">
		  	<swiper-item class="tab-content" v-for="(tabItem,tabIndex) in setlist" :key="tabIndex">
		  		<scroll-view 
		  			class="list-scroll-content"   
		  			scroll-y
		  			@scrolltolower="loadib"
		  		>    
				<view class="order-item" v-for="(item,index) in oaderinfo" :key="index" v-if="item.status !== 'WaitPay'">
					<view class="item-catyes" @click="xparticulars(item)">
						<van-icon name="shop-o"/>&nbsp; 
						<text class="time">营昕居</text>
						<text class="caty-Cancel">{{formatEmployment(item.status)}}</text>
					</view>  
					<view class="goods-box-single" @click="xparticulars(item)">
						<image class="goods-img" :src="item.mainImage" mode="aspectFill"></image>
				      <view class="right">
					      <text class="title clamp" v-if="tabCurrentIndex == 1">{{item.userNick}}</text>
					      <text class="title clamp" v-else>{{item.provideServiceUserNick}}</text>
					      <text class="attr-box">{{item.title}}</text>
						  <text class="price">{{item.price}}</text>
						  <text class="num">x{{item.number}}</text>
				</view>
				</view>
					<view class="price-box">
						<text class="price">付款：￥{{item.totalPrice}}</text>
					</view>
					<view class="action-box b-t">
						<button class="action-btn" 
						v-if="item.status === 'InService' || item.paymentRecords[0].lastPay == false && item.paymentRecords[1].lastPay == false && item.paymentRecords[2].lastPay == false" 
						style="border: 1px solid #ff7144; color: #ff7144;" @click="xconfirm(item)">确定服务</button>
						
						<button class="action-btn" 
						v-else-if="item.status === 'Finish' && tabCurrentIndex == 0" 
						style="border: 1px solid #ff7144; color: #ff7144;" @click="xconiog(item)">追加服务</button>
						</view>
						<!-- 弹出框 -->
						<view class="modal-mask"  v-if="showModal"></view>
						    <view class="modal-dialog" v-if="showModal">
						      <view class="t-title">该服务确认后将服务费返至平台服务人员，代表该服务项已完成</view>
						     <van-steps
						       :steps="steps"
						       :active="active"	
						       direction="vertical"
						       active-color="#ff7144"
							   @click-step="xcoste"
						     />
							  <button class="b-title" @click="cancel">取消</button>
							  <button class="y-title" @click="xconsotr">确定</button>
						    </view>
				</view>
				</scroll-view>
				</swiper-item>
				<van-loading class="actoue" v-show="siopen" size="24px" type="spinner">加载中...</van-loading>
				</swiper>
	</view>
</template>

<script>
	import user from '@/http/user.js'
	import employeesConst from '@/employees/employees.js'
	const hireTypet = {}
	 employeesConst.histoertype.forEach((item)=>{
		 hireTypet[item.status] = item.value
	 })
	 
	export default{
		data(){
			return{
				active:0,
				siopen:false,
				steps: [
				     {
				       text: '30%服务费用',
				       desc: '',
				      
				     },
				     {
				       text: '70%服务费用',
				       desc: '',
				
				     },
				     {
				       text: '100%服务费用',
				       desc: '',
				     }],
				scterp:{},
				oaderinfo:[],
				showModal:false,
				info:{
				 serviceOrderId: "",
				 ratio: Number,
				 lastPay:''
				},
				q:{
					index:1,
					size:Number
				},
				a:1000,
				tabCurrentIndex:0,
				setlist:[{
					status:'1',
					text:'已购买服务'
				},{
					status:'2',
					text:'服务的客户'
				}]
			}
		},
		onLoad(){
			this.loadib()
		},
		//加载更多
		onReachBottom(){
			const that = this;
			this.siopen = true
			this.q.size = this.q.size+20
			this.a = this.q.size
			setTimeout(async ()=>{
			if(this.tabCurrentIndex == 0){
			const res = await user.customization(this.q)
			this.oaderinfo = res.data.data
			} else if(this.tabCurrentIndex == 1){
			const red = await user.client(this.q)
			this.oaderinfo = red.data.data
			}
			 that.siopen = false
			},1000)
		},
		methods:{
			async loadib(){
				this.q.size = this.a
				if(this.tabCurrentIndex == 0){
				const res = await user.customization(this.q)
				this.oaderinfo = res.data.data
				} else if(this.tabCurrentIndex == 1){
				const red = await user.client(this.q)
				this.oaderinfo = red.data.data
				}
			},
			//swiper 切换
			changeTab(e){
				this.tabCurrentIndex = e.target.current;
				this.loadib()  
			},
			//顶部tab点击
			tabClick(index){
				this.tabCurrentIndex = index;
				this.loadib()
			},
			// 确定服务
			async xconfirm(item){
				if(item.totalPrice > 3000){
				uni.showModal({
				content: '该服务确认后将服务费返至平台服务人员，代表该服务项已完成',
				confirmColor:'#ff7144',
				success: async(e)=>{
				if(e.confirm){
						this.info.serviceOrderId = item.serviceOrderId
						this.info.ratio = 100
						this.info.lastPay = true
						const res = await user.xensure(this.info)
						this.loadib()
				  }
				 },
				 })
				 	}
					else if(item.totalPrice < 3000){
						this.showModal = true
					    this.dologn(item)
					}
			},
			// 步骤条按钮
			xcoste(event){
				console.log(event.detail)
				this.active = event.detail
			},
			dologn(item){
				this.scterp = item
				if(item.paymentRecords != null){
					if(item.paymentRecords[0].paymentRatio == 30){
						this.steps[0].desc = item.paymentRecords[0].payTime
						this.active = 1
					} else if(item.paymentRecords[0].paymentRatio == 70){
						this.steps[0].desc = item.paymentRecords[0].payTime
						this.steps[1].desc = item.paymentRecords[0].payTime
						this.active = 2
					} else if(item.paymentRecords[1].paymentRatio == 40){
						this.steps[0].desc = item.paymentRecords[0].payTime
						this.steps[1].desc = item.paymentRecords[1].payTime
						this.active = 2
					}
				}
			},
			// 步骤条确定
			async xconsotr(){
				if(this.active == 0){
					this.info.ratio = 30
					this.info.lastPay = false
				}
				else if(this.active == 1){
					if(this.scterp.paymentRecords == null){
						this.info.ratio = 70
						this.info.lastPay = false
					} else {
						this.info.ratio = 40
						this.info.lastPay = false
					}
				}
				else if(this.active == 2){
					this.info.ratio = 100
					this.info.lastPay = true
				}
				this.info.serviceOrderId = this.scterp.serviceOrderId
				const res = await user.xensure(this.info)
				this.showModal = false
				this.loadib()
			},
			// 步骤条取消
			cancel(){
				this.showModal = false
			},
			// 追加服务
			xconiog(item){ 
				uni.navigateTo({
					url: `/pages/order/createOrder?data=${JSON.stringify(item)}`,
				})
			},
			// 跳转文章详细
			xparticulars(item){
			  uni.navigateTo({
			  	url: `/package/set/detail?data=${JSON.stringify(item)}&id=${this.tabCurrentIndex}`,
			  })
			},
			// 状态转换
			formatEmployment(code){
				return hireTypet[code];
			  },
		}
	}
</script>

<style lang="scss">
	page, .content{
		background: $page-color-base;
		height: 100%;
	}
	.swiper-box{
		height: calc(100% - 40px);
	}
	.list-scroll-content{
		height: 100%;
	}
	.navbar{
		display: flex;
		height: 40px;
		padding: 0 5px;
		background: #fff;
		box-shadow: 0 1px 5px rgba(0,0,0,.06);
		position: relative;
		z-index: 10;
		.nav-item{
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 15px;
			color: $font-color-dark;
			position: relative;
			&.current{
				color: $uni-color-primary;
				&:after{
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0; 
					transform: translateX(-50%);
					width: 44px;    
					height: 0; 
					border-bottom: 2px solid $uni-color-primary;
				}
			}
		}
	}
	.caty-Cancel{
		display: inline-block;
		position: absolute;
		right: 20rpx;
		margin-right: 30rpx;
		font-size: 28rpx;
		color: $font-color-light;
	} 
	.time{
		display: inline-block;
		font-size: 30rpx;
		margin-left: 10rpx;
	}
		.order-item{
			display: flex;
			flex-direction: column;
			padding-left: 30upx;
			background: #fff;
			margin-top: 16upx;
			}
	/* 单条商品 */
	.goods-box-single{
		display: flex;
		padding: 20upx 0;
		.goods-img{
			display: block;
			width: 120upx;  
			height: 120upx;
			border-radius: 10px;
		}
		.right{
			flex: 1;
	
			flex-direction: column;
			padding: 0 30upx 0 24upx;
			overflow: hidden;
			.title{
				font-size: $font-base + 2upx;
				color: $font-color-dark;
				line-height: 1;
				margin-bottom: 20rpx;
			}
			.attr-box{
				font-size: $font-sm + 2upx;
				color: $font-color-light;
		
			}
			.price{
				transform: translateY(-120%);
				float: right;
				font-size: $font-base + 2upx;
				color: $font-color-dark;
				&:before{
					content: '￥'; 
					font-size: $font-sm;   
					margin: 0 2upx 0 8upx;
				}
			}
			.num{
				position: absolute;
				right: 35rpx;
				font-size:24rpx !important;
				margin: 0 8upx !important;
				color:#A4A4A4 !important;
			}
		}
	}
	.price-box{
		display: flex;
		justify-content: flex-end;
		align-items: baseline;
		padding: 20upx 30upx;
		font-size: $font-sm + 2upx;
		color: $font-color-light;
	
		.price{
			font-size: $font-lg;
			color: $font-color-dark;
			&:before{
				font-size: $font-sm;
				margin: 0 2upx 0 8upx;
			}
		}
	}
	.action-box{
		display: flex;
		justify-content: flex-end;
		align-items: center;
		height: 100upx;
		position: relative;
		padding-right: 30upx;
	}
	.action-btn{
		width: 160upx;
		height: 60upx;
		margin: 0;
		margin-left: 24upx;
		padding: 0;
		text-align: center;
		line-height: 60upx;
		font-size: $font-sm + 2upx;
		color: $font-color-dark;
		background: #fff;
		border-radius: 100px;
		&:after{
			border-radius: 100px;
		}
		&.recom{
			background: #fff9f9;
			color: $base-color;
			&:after{
				border-color: #f7bcc8;
			}
		}
	}
	
	// 弹出框
	/* 弹出层 */
	.modal-mask {
	  width: 100%;
	  height: 100%;
	  position: fixed;
	  top: 0;
	  left: 0;
	  background: #000;
	  opacity: 0.5;
	  z-index:1;
	}
	 
	.modal-dialog {
	  overflow: hidden;
	  position: fixed;
	  top: 15%;
	  background: #f9f9f9;
	  border-radius: 30rpx; 
	  right: 5%;
	  width: 90%;
	  z-index: 2;
	}
	.view-image{
	  width: 580rpx;
	  height: 580rpx;
	  margin-left: 50rpx;
	}
	.guanbi{
	  position:absolute;
	  width: 40rpx;
	  height:40rpx;
	  background-size:100%;
	  text-align: center; 
	  top: 10px; 
	  right: 10px;
	  font-size: 14px;
	  line-height: 50rpx;
	}
	.t-title{
	  font-size:36rpx;
	  text-align: center;
	  margin: 30rpx 62rpx;
	  font-weight: bold;
	  color: #000;
	}
	
	.b-title{
	  font-size:26rpx;
        display: inline-block;
		opacity: 1;
	  margin-top:20rpx;
	  width: 200rpx;
	  float: left;
	  margin-left: 15%;
	  border-radius: 20px;
	  border: 2rpx solid #CDCDCD;
	  margin-bottom: 50rpx;
    }
	.y-title{
	  font-size:26rpx;
	    display: inline-block;
		opacity: 1;
	  margin-top:20rpx;
	  width: 200rpx;
	  float: right;
	  margin-right: 15%;
	  border-radius: 20px;
	  border: 2rpx solid #ff7144;
	  background-color: #ff7144;
	  color: #fff;
	}
	.van-step--vertical{
		height: 150rpx !important;
	}
	
	// 加载
	.actoue{
		text-align: center;
	}
</style>